<template>
    <div class="main">
        <div class="AllContent">
            <div class="head">
                <div class="head-l"><i class="iconfont icon-msnui-left-arrow-round" @click="jump"></i></div>
                <div class="head-c">{{data.DetailHeadTitle}}<img src="/static/img/yiyantang/7.jpg" style="width: 0.09rem;"></div>
                <div class="head-r"><i class="iconfont icon-refresh"></i>
                    <i class="iconfont icon-fenxiang"></i>
                </div>
            </div>
            <div class="ban"><div class="banmain">
                <p class="p1">{{data.DetailNavText}}</p>
                <img class="img" src="/static/img/yiyantang/3.png">
            </div>
                <div class="talk">{{data.DetailNavVisit}}</div>
            </div>
            <div class="content">
                <div class="item">
                    <div class="text">
                        <p class="p-top"><span class="span">活动</span>{{data.DetailActTitle}}</p>
                        <p class="p-bottom">{{data.DetailActText}}</p>
                    </div>
                    <img class="img" :src="data.DetailActImgUrl">
                </div>
                <div class="item">
                    <div class="text">
                        <p class="p-first"><span class="span">精</span>{{msg.DetailMasterTitle}}</p>
                        <p class="p-last">{{msg.DetailMasterFrom}}  <span class="span" style="color: #accdff;">{{msg.DetailMasterName}}</span></p>
                    </div>
                    <img class="img" :src="msg.DetailMasterImgUrl">
                </div>
            </div>
            <div class="zixun">
                <ul class="zixunlist">
                    <li class="li active one">全部<b class="b"></b></li>
                    <li class="li two" >问答<b class="b"></b></li>
                    <li class="li three">抑郁症<b class="b"></b></li>
                    <li class="li four">就医攻略<b class="b"></b></li>
                    <li class="li five">用药指导<b class="b"></b></li>
                </ul>
                <div class="luntan">
                    <div class="mainOne" @click="go1">
                        <div class="luntan-header">
                            <img class="img" src="/static/img/yiyantang/11.jpg">
                            <div class="luntan-r">
                                <div class="title">
                                    <p class="p-t">{{doctor.DetailAllName}}<span class="span">健康号</span></p>
                                    <p class="p-c">{{doctor.DetailAllTime}}</p>
                                </div>
                                <div class="p-r">向他提问</div>
                            </div>
                        </div>
                        <div class="luntan-content active" >
                            <p class="p">{{doctor.DetailAllTitle}}</p>
                            <p class="post">{{doctor.DetailAllContent}}</p>
                            <img class="imglast" :src="doctor.DetailAllImgUrl">
                            <div class="space"> <span class="span">回复2 · 点赞4</span></div>
                        </div>
                    </div>
                    <div class="mainTwo" @click="go2" style="display: none">
                        <div class="mainHeader">
                            <img class="img" :src="ask.DetailAskImgUrl" />
                            <div class="post">{{ask.DetailAskUser}}</div>
                            <p class="p">{{ask.DetailAskPrice}}</p>
                        </div>
                        <div class="msg">{{ask.DetailAskContent}}</div>
                        <div class="foot">
                            <div class="foot-l"><span class="span">{{ask.DetailAskWeiguan}}</span><b class="b">{{ask.DetailAskAnswer}}</b></div>
                            <div class="foot-r">{{ask.DetailAskWeiguanNum}}</div>
                        </div>
                        <div class="mainHeader">
                            <img class="img" :src="ask.DetailAskImgUrl" />
                            <div class="post">{{ask.DetailAskUser}}</div>
                            <p class="p">{{ask.DetailAskPrice}}</p>
                        </div>
                        <div class="msg">{{ask.DetailAskContent}}</div>
                        <div class="foot">
                            <div class="foot-l"><span class="span">{{ask.DetailAskWeiguan}}</span><b class="b">{{ask.DetailAskAnswer}}</b></div>
                            <div class="foot-r">{{ask.DetailAskWeiguanNum}}</div>
                        </div>
                    </div>
                    <div class="mainThree" style="display: none">
                        <div class="mainHeader">
                            <div class="head-l">
                                <img class="img" src="/static/img/yiyantang/14.jpg">
                                <div class="text">
                                    <p class="p-t">许凤全<b>主任医师</b></p>
                                    <p class="p-b">2天前</p>
                                </div>
                            </div>
                            <div class="ask">向他提问</div>
                        </div>
                        <h2 style="margin-top: 0.1rem; font-weight: bold" >抑郁症有哪些发病特点</h2>
                        <div class="postcontent">&nbsp; &nbsp; &nbsp; &nbsp;其首要特点是发病率高。由于现代生活节奏的加快，社会压力的增加，此病逐年上升，被精神病和心理学专家称为“精神科的感冒”。WHO估计，全世界的抑郁症患者约有3.4亿。抑郁症在我国的情况也不容乐观，我国抑郁症患病率约为10%~15%左右，已与发达国家统计结果相近。世界卫生组织对抑郁症进行终生发病率调查，结果显示大约有11%的人在一生中的某个时期都曾经历过相当严重、需要治疗的抑郁症。这就相当于大约10个人中就有1个曾经或即将罹患抑郁症。&nbsp; &nbsp; &nbsp; &nbsp;WHO指出到2020年，抑郁将成为影响全球的第二大健康问题。其次，抑郁症危害性非常大。
                            仅单相抑郁症、重性抑郁障碍对“伤残调整生命年”的影响将达5.7%，居导致伤残前十位重要原因之首。抑郁症已成为发达国家和发展中国家中15-44岁女性人群中导致疾病负担的最主要原因。&nbsp; &nbsp; &nbsp; &nbsp;抑郁症不仅给社会带来很大的负担，还会造成严重的家庭负担以及导致家庭功能障碍，抑郁症对家庭造成的不良影响已超过了高血压、冠心病、糖尿病、癌症等慢</div>
                    </div>
                    <div class="mainfour" style="display: none">
                        <div class="mainHeader">
                            <div class="head-l">
                                <img class="img" src="/static/img/yiyantang/15.jpg">
                                <div class="text">
                                    <p class="p-t">常崇旺<b>健康号</b></p>
                                    <p class="p-b">2天前</p>
                                </div>
                            </div>
                            <div class="ask">向他提问</div>
                        </div>
                        <h2 style="margin-top: 0.1rem; font-weight: bold" >“寒假情系脑瘫宝宝，爱无时限” 2.8常崇旺教授在线义诊通知</h2>
                        <div class="postcontent">为了帮助家长正确认识脑瘫，使脑瘫孩子能及时接受科学诊疗，
                            西北脑瘫诊疗中心常崇旺教授特别举办“寒假情系脑瘫宝宝，爱无时限”在线义诊活动</div>
                        <img src="/static/img/yiyantang/16.jpg" style="width: 2.4rem">
                    </div>
                    <div class="mainfive" style="display: none">
                        <div class="mainHeader">
                            <div class="head-l">
                                <img class="img" src="/static/img/yiyantang/17.jpg">
                                <div class="text">
                                    <p class="p-t">金均<b>健康号</b></p>
                                    <p class="p-b">2天前</p>
                                </div>
                            </div>
                            <div class="ask">向他提问</div>
                        </div>
                        <h2 style="margin-top: 0.1rem; font-weight: bold" >521神外金钧主任：如何正确服用抗癫痫药物？</h2>
                        <div class="postcontent">首先，癫痫是慢性病，并且不是一个单一的疾病，而是可以分为很多的类型，每种类型的用药并不相同。因此，我们非常强调，
                            癫痫的准确诊断和分类是选择药物治疗并获得良好效果的前提。一旦开始服用药物，要注意：
                        </div>
                        <img src="/static/img/yiyantang/2.png" style="width: 2.4rem">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data:function(){
            return{
                data:[],
                msg:[],
                doctor:[],
                ask:[]
            }
        },
        methods:{
          jump:function () {
              this.$router.push("/yiyantang");
          },
          go1:function () {
                this.$router.push("/doctortalk")
            },
            go2:function () {
                this.$router.push("/illertalk")
            }
        },
        created:function () {
            let index=this.$route.params.index;
            fetch("./static/data/data.json").then((response)=>{
                response.json().then((data)=>{
                    this.data=data[0].kandian[0].List[index].Detail[0];
                    this.msg=data[0].kandian[0].List[index].Detail[0].DetailMaster[0];
                    this.doctor=data[0].kandian[0].List[index].Detail[0].DetailTalk[0].DetailAll[0];
                    this.ask=data[0].kandian[0].List[index].Detail[0].DetailTalk[1].DetailAsk[0];
                    console.log(data[0].kandian[0].List[index].Detail[0].DetailTalk[1].DetailAsk[0])
                })
            })
        },
        mounted:function () {
            $(".zixunlist .li").click(function () {
                $(this).addClass("active").siblings().removeClass("active")
            })
            $(" .one").click(function(){
                $(".mainOne").css("display","block").siblings().css("display","none")
            })
            $(".zixunlist .two").click(function(){
                $(".mainTwo").css("display","block").siblings().css("display","none")
            })
            $(".zixunlist .three").click(function(){
                $(".mainThree").css("display","block").siblings().css("display","none")
            })
            $(".zixunlist .four").click(function(){
                $(".mainfour").css("display","block").siblings().css("display","none")
            })
            $(".zixunlist .five").click(function(){
                $(".mainfive").css("display","block").siblings().css("display","none")
            })
        }
    }
</script>
<style scoped>
    .AllContent {
        background: #f5f6f6; }

    .head {
        width: 100%;
        height: 0.42rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        background: white; }
    .head .head-l .icon-msnui-left-arrow-round {
        font-size: 0.3rem; }
    .head .head-c {
        font-size: 0.18rem; }

    .ban {
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        padding: 0.12rem;
        position: relative; }
    .ban .banmain {
        background: #589bff;
        display: flex;
        padding: 0.16rem 0.12rem;
        color: white;
        border-radius: 5px;
        height: 0.8rem;
        position: relative; }
    .ban .banmain .p1 {
        font-size: 0.16rem;
        line-height: 0.24rem;
        margin-bottom: 0.1rem; }
    .ban .banmain .img {
        width: 0.46rem;
        height: 0.46rem; }
    .ban .talk {
        width: 0.88rem;
        line-height: 0.22rem;
        border-radius: 5px;
        background: #4f8ce6;
        text-align: center;
        color: white;
        position: absolute;
        left: 0.26rem;
        bottom: 0.2rem; }

    .content {
        background: white; }
    .content .item {
        height: 0.8rem;
        width: 93%;
        margin: 0 auto;
        display: flex;
        margin-top: 0.15rem;
        border-bottom: 1px solid #eee; }
    .content .item .img {
        width: 1rem;
        height: 0.65rem; }
    .content .item .text {
        width: 70%; }
    .content .item .text .p-top {
        display: flex;
        font-size: 0.15rem; }
    .content .item .text .p-top .span {
        font-size: 0.1rem;
        font-weight: normal;
        display: block;
        width: 0.35rem;
        height: 0.2rem;
        line-height: 0.20rem;
        background: #02d081;
        color: white;
        text-align: center; }
    .content .item .text .p-bottom {
        color: #84899b;
        font-size: 0.14rem; }
    .content .item .text .p-first {
        display: flex;
        font-size: 0.15rem; }
    .content .item .text .p-first .span {
        font-size: 0.1rem;
        display: block;
        width: 0.2rem;
        height: 0.18rem;
        line-height: 0.18rem;
        background: #ff695c;
        color: white;
        text-align: center;
        margin-top: 0.03rem; }

    .zixun {
        background: white; }
    .zixun .zixunlist {
        height: 0.39rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
        border-bottom: 1px solid #eee; }
    .zixun .zixunlist .li {
        width: 20%;
        font-size: 0.12rem;
        color: #a6a8b6;
        text-align: center;
        position: relative; }
    .zixun .zixunlist .li .b {
        width: 0.17rem;
        height: 0.02rem;
        background: #3f86ff;
        position: absolute;
        bottom: -0.1rem;
        left: 38%;
        display: none; }
    .zixun .zixunlist .active {
        color: #3f86ff; }
    .zixun .zixunlist .active .b {
        display: block; }
    .zixun .luntan {
        width: 3.5rem;
        padding-top: 0.14rem;
        margin: 0 auto; }
    .zixun .luntan .mainOne .luntan-header {
        display: flex;
        align-items: center; }
    .zixun .luntan .mainOne .luntan-header .img {
        width: 0.37rem;
        height: 0.32rem; }
    .zixun .luntan .mainOne .luntan-header .luntan-r {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center; }
    .zixun .luntan .mainOne .luntan-header .luntan-r .title .p-t {
        font-size: 0.14rem; }
    .zixun .luntan .mainOne .luntan-header .luntan-r .title .p-t .span {
        width: 0.39rem;
        line-height: 0.15rem;
        color: white;
        text-align: center;
        background: #02d081;
        margin-left: 0.05rem;
        border-radius: 0.05rem; }
    .zixun .luntan .mainOne .luntan-header .luntan-r .title .p-c {
        color: #a6a8b6; }
    .zixun .luntan .mainOne .luntan-header .luntan-r .p-r {
        width: 0.6rem;
        line-height: 0.23rem;
        text-align: center;
        color: #3f86ff;
        border-radius: 15px;
        border: 1px solid #3f86ff; }
    .zixun .luntan .mainOne .luntan-content .img {
        width: 0.16rem;
        height: 0.16rem;
        display: block;
        float: left;
        margin-top: 0.03rem; }
    .zixun .luntan .mainOne .luntan-content .p {
        font-size: 0.16rem;
        font-weight: bold;
        float: left;
        width: 100%; }
    .zixun .luntan .mainOne .luntan-content .post {
        font-size: 0.15rem;
        color: #83889a;
        margin-top: 0.1rem; }
    .zixun .luntan .mainOne .luntan-content .imglast {
        width: 2.43rem; }
    .zixun .luntan .mainOne .luntan-content .space {
        position: relative;
        height: 0.16rem; }
    .zixun .luntan .mainOne .luntan-content .space .span {
        font-size: 0.08rem;
        position: absolute;
        right: 0;
        color: #a6a8b6; }
    .zixun .luntan .mainTwo .mainHeader {
        display: flex;
        align-items: center;
        justify-content: space-between; }
    .zixun .luntan .mainTwo .mainHeader .img {
        width: 0.3rem; }
    .zixun .luntan .mainTwo .mainHeader .post {
        width: 82%; }
    .zixun .luntan .mainTwo .mainHeader .p {
        color: #ff695c;
        font-size: 0.16rem; }
    .zixun .luntan .mainTwo .msg {
        font-size: 17px;
        color: #28354c;
        margin-top: 0.05rem; }
    .zixun .luntan .mainTwo .foot {
        padding-top: 0.1rem;
        display: flex;
        border-bottom: 1px solid #eee; }
    .zixun .luntan .mainTwo .foot .foot-l {
        width: 90%; }
    .zixun .luntan .mainTwo .foot .foot-l .span {
        color: #feb70f;
        font-size: 0.12rem; }
    .zixun .luntan .mainTwo .foot .foot-l .b {
        color: #a6a8b6;
        font-size: 0.12rem; }
    .zixun .luntan .mainTwo .foot .foot-r {
        font-size: 0.12rem;
        color: #a6a8b6; }
    .zixun .luntan .mainThree .mainHeader, .zixun .luntan .mainfour .mainHeader, .zixun .luntan .mainfive .mainHeader {
        display: flex;
        align-items: center;
        justify-content: space-between; }
    .zixun .luntan .mainThree .mainHeader .head-l, .zixun .luntan .mainfour .mainHeader .head-l, .zixun .luntan .mainfive .mainHeader .head-l {
        display: flex; }
    .zixun .luntan .mainThree .mainHeader .head-l .text, .zixun .luntan .mainfour .mainHeader .head-l .text, .zixun .luntan .mainfive .mainHeader .head-l .text {
        margin-left: 0.01rem; }
    .zixun .luntan .mainThree .mainHeader .head-l .text .p-b, .zixun .luntan .mainfour .mainHeader .head-l .text .p-b, .zixun .luntan .mainfive .mainHeader .head-l .text .p-b {
        color: #a6a8b6; }
    .zixun .luntan .mainThree .mainHeader .head-l img, .zixun .luntan .mainfour .mainHeader .head-l img, .zixun .luntan .mainfive .mainHeader .head-l img {
        width: 0.36rem;
        height: 0.36rem;
        border-radius: 50%; }
    .zixun .luntan .mainThree .mainHeader .ask, .zixun .luntan .mainfour .mainHeader .ask, .zixun .luntan .mainfive .mainHeader .ask {
        width: 0.56rem;
        line-height: 0.24rem;
        font-size: 0.12rem;
        border: 1px solid #3f86ff;
        padding: 0 7px;
        border-radius: 20px;
        color: #3f86ff;
        text-align: center; }
    .zixun .luntan .mainThree .postcontent, .zixun .luntan .mainfour .postcontent, .zixun .luntan .mainfive .postcontent {
        color: #83889a;
        line-height: 1.6em;
        font-weight: 400;
        font-size: 15px;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        word-wrap: break-word; }

    /*# sourceMappingURL=detail.css.map */

</style>
